<template>
  <div class="index-Container">
   <div class="custom-navbar">
    <CustomNavbar :activeNav="activeNav" @update-nav="changnav"/>
   </div>
   <div  class="content-container">
    <IndexBanner v-if="activeNav==='1'"/>
    <Recommend v-if="activeNav==='1'"/>
    <MusicDataBase v-if="activeNav==='2'"/>
   </div>
  </div>
  
</template>

<script setup lang="ts">
import CustomNavbar from '@/components/index/CustomNavbar.vue';
import IndexBanner from '@/components/index/IndexBanner.vue';
import Recommend from '@/components/index/Recommend.vue';
import MusicDataBase from '@/components/index/MusicDataBase.vue'
import { ref } from 'vue';
const activeNav=ref('1')
function changnav(nav:string){
  activeNav.value=nav
}

</script>

<style scoped lang="scss">
.index-Container{
   background-color: rgb(234, 247, 255);
   
  width: 100%;
   display: flex;
   flex-direction: column;
   height: 100vh;
     .custom-navbar {
 flex: 2.5;
  

  }
    .content-container{
    flex: 7.5;
overflow: auto;
  }
}



</style>
